<template>
	<div class="cont">
		<header>
			<img src="@/assets/homeLeftImg/arrow1.png" alt="" />
			<span>{{ title }}</span>
			<img src="@/assets/homeLeftImg/arrow2.png" alt="" />
		</header>
		<div class="main">
			<div class="echar">
				<img :src="imgUrl" alt="" />
				<span>93.94%</span>
			</div>
			<ul>
				<li>
					<span>累计发电</span>
					<span>22728.30</span>
					<span>万kWh</span>
				</li>
				<li>
					<span>累计上网</span>
					<span>22728.30</span>
					<span>万kWh</span>
				</li>
			</ul>
		</div>
	</div>
</template>
<script setup>
// import jd1 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd2 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd3 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd4 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd5 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd6 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd7 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd8 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd9 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd10 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd11 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd12 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd13 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd14 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd15 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd16 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd17 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd18 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd19 from "@/assets/homeLeftImg/nfd/jd1.png";
// import jd20 from "@/assets/homeLeftImg/nfd/jd1.png";

const req1 = import.meta.glob("@/assets/homeLeftImg/nfd/*.*", { eager: true });
const req = { ...req1 };
const imagesMap = {};

// 循环所有图片，将图片设置成建，值为导入该图片的地址
for (const key in req) {
	let name = key.split("/").slice(-1)[0].split(".")[0];
	imagesMap[name] = req[key].default;
}

console.log("imagesMap", imagesMap);

const props = defineProps({
	title: {
		type: String,
		default: ""
	},
	num: {
		type: String,
		default: ""
	}
});

const num_ = ref("");
watch(
	() => props.num,
	val => {
		let p = "";
		for (let i = 0; i < 8 - val.length; i++) {
			p += "0";
		}
		num_.value = p + val;
		console.log("num", num_);
	},
	{
		deep: true
	}
);
</script>
<style lang="scss" scoped>
.cont {
	width: 100%;
	height: 200px;

	display: flex;
	flex-direction: column;
	margin: 20px 0;
	header {
		font-weight: bold;
		font-size: 16px;
		color: #ffffff;
		text-align: center;
		display: flex;
		height: 30px;
		line-height: 30px;
		align-items: center;
		justify-content: center;
		img {
			width: 12px;
			height: 12px;
		}
		span {
			margin: 0 12px;
		}
	}
	.main {
		flex: 1;
		.echar {
			height: 100px;
			width: 100%;
			border: 1px solid yellow;
		}

		ul {
			padding: 0 4px;
			li {
				height: 34px;
				width: 100%;
				background: url(@/assets/homeLeftImg/fdBj.png) center center;
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				padding: 0 10px;
				justify-content: space-between;
				span:nth-child(1) {
					font-weight: 400;
					font-size: 14px;
					color: #ffffff;
				}
				span:nth-child(2) {
					font-weight: bold;
					font-size: 16px;
					color: #ffffff;
				}
				span:nth-child(3) {
					font-weight: 400;
					font-size: 14px;
					color: #aaaaaa;
				}
				&:nth-child(1) {
					margin-bottom: 8px;
				}
			}
		}
	}
}
</style>
